import { defineComponent, PropType } from 'vue'
import { ISonglist } from 'apis/types/business'

import styles from './style.module.scss'
import { formatDatetime } from '@/utils/time'
import { formatNum } from '@/utils/num'

export default defineComponent({
  name: '',
  props: {
    data: Object as PropType<ISonglist>,
  },
  setup(props) {
    const { data } = props
    return () => {
      return (
        <>
          <div class={styles.root}>
            {/* <img
              class={styles.infoImg}
              src="https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg"
              alt=""
            /> */}
            {data?.coverImgUrl && (
              <el-image src={data?.coverImgUrl} class={styles.infoImg} lazy />
            )}
            <div class={styles.content}>
              <div class={styles.title}>
                <div class={styles.type}>歌单</div>
                <span>{data?.name}</span>
              </div>
              <div class={styles.author}>
                {data?.creator?.avatarUrl && (
                  <el-image
                    class={styles.authorImg}
                    src={`${data?.creator?.avatarUrl}?param=25y25`}
                    lazy
                  />
                )}
                <div class={styles.name}>{data?.creator.nickname}</div>
                <div class={styles.date}>
                  {formatDatetime(data?.createTime)}创建
                </div>
              </div>
              <div class={styles.detail}>
                <div class={styles.tags}>
                  <span class={styles.label}>标签：</span>
                  <span class={styles.item}>
                    {data?.tags.join(' / ') || '--'}
                  </span>
                </div>
                <div class={styles.num}>
                  <span class={styles.label}>歌曲数：</span>
                  {data?.trackCount}&nbsp;&nbsp;
                  <span class={styles.label}>播放数：</span>
                  {formatNum(data?.playCount)}
                </div>
                <div class={styles.desc}>
                  <span class={styles.label}>简介：</span>
                  {data?.description || '--'}
                </div>
              </div>
            </div>
          </div>
        </>
      )
    }
  },
})
